<template>
  <div class="safe-warring">
    <div class="safe-radio-body">
      <el-radio-group v-model="activeName" size="small" @change="selectStyle">
        <el-radio-button label="first" >实时报警</el-radio-button>
        <el-radio-button label="second" >人员实时状态</el-radio-button>
      </el-radio-group>
    </div>
    <div class="safe-warring-body">
          <div style="padding-left: 10px; display: inline-flex">
            <div class="warring-tz">
              <div>体征异常</div>
              <div>{{tizheng}}</div>
            </div>
            <div class="warring-gj">
              <div>安全工具异常</div>
              <div>{{gongju}}</div>
            </div>
            <div class="warring-qy">
              <div>危险区域报警</div>
              <div>{{weilan}}</div>
            </div>
            <div class="warring-sos">
              <div>SOS报警</div>
              <div>{{sos}}</div>
            </div>
            <div class="warring-dl">
              <div>跌落报警</div>
              <div>{{dieluo}}</div>
            </div>
          </div>
          <div style="padding-left: 10px;padding-top: 5px; padding-right: 10px;">
            <el-table
              :data="warningUser"
              style="width: 100%"
              height="300px"
              v-loading = "pictLoading"
              element-loading-text = "数据正在加载中"
              element-loading-spinner = "el-icon-loading"
              stripe
              :header-cell-style="{background:'#1C7CD5',color:'#fff'}"
              >
              <el-table-column
                prop="recordTime"
                label="报警时间"
                width="180" height="20">
                <template slot-scope="scope">
                  {{scope.row.recordTime | timestampToDate}}
                </template>
              </el-table-column>
              <el-table-column
                prop="onwername"
                label="人员姓名"
                width="120">
              </el-table-column>
              <el-table-column
                prop="typeName"
                width="160"
                label="报警类型">
                <template slot-scope="scope">
                <span
                  :class="'state-warring'"
                  disable-transitions>{{scope.row.typeName}}</span>
                </template>
              </el-table-column>
              <el-table-column
                width="120"
                label="处理/取消">
                <template slot-scope="scope">
                  <el-row>
                    <el-button type="success" style="border-radius:2px;background-color:#19BD85;width: 36px;height:20px;font-size: 12px;padding: 0" @click="doWarning(scope.$index,scope.row.id,1)">处理</el-button>
                    <el-button type="info" style="border-radius:2px;background-color:#888888;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px 2px 2px 8px" @click="doWarning(scope.$index,scope.row.id,2)">忽略</el-button>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-page" style="display: inline-flex">
              <div style="width: 100px; margin-left: 480px;">
                <el-button size="mini" style="width: 100px;height: 22px;padding: 4px 3px" @click="exportToExcel">报警列表导出</el-button>
              </div>
            </div>
          </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "SafeWarring",
  data(){
    return {
      pictLoading:true,
      activeName: 'first',
      warringStyle: 'safe-warring-body',
      warningUser: [],
      tizheng:"0",
      gongju:"0",
      weilan:"0",
      sos:"0",
      dieluo:"0",
      safetimer:""
    }
  },
  mounted () {
    let __this = this
    let config = {
      headers: {'Content-Type': 'application/json'}
    }

    this.axios.get("warning/listNewWarning").then((res)=>{
      __this.warningUser = res.data.result
      __this.pictLoading = false
    })

    this.axios.get("warning/safeInfo ").then(function (response) {
      let result = response.data
      if(result.code=='200'){
        __this.tizheng = ""+result.result.tizheng
        __this.gongju = ""+result.result.gongju
        __this.weilan = ""+result.result.weilan
        __this.sos = ""+result.result.sos
        __this.dieluo = ""+result.result.dieluo
      }
    }).catch(function (error) {
      console.log(error)
    })
    this.safetimer = setInterval(this.safetask, 10000)
  },
  beforeDestroy() {
    clearInterval(this.safetimer);
  },
  methods:{
    selectStyle(val){
      if(val=="first") {
        this.warringStyle = 'safe-warring-body';
      }else{
        this.warringStyle = 'safe-warring-body-700';
        this.$router.push({path: "/safeUser"});
      }
    },
    doWarning(index,id,state){
      let label = ""
      let msg = ""
      if(state==1){
        label = "确实要处理此告警吗？"
        msg = "告警已处理！"
      }
      if(state==2){
        label = "确实要忽略此告警吗？"
        msg = "告警已忽略！"
      }
      let warning = {"id":id,"state":state}
      let config = {
        headers: {'Content-Type': 'application/json'}
      }
      this.$confirm(label, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("warning/doWarning", warning, config).then((res) => {
          this.$message({
            message: msg,
            duration:2000,
            type: 'success',
            offset:'300'
          })
          this.axios.get("warning/listNewWarning").then((res)=>{
            console.log(this.warningUser)
            this.warningUser = res.data.result
          })
        })

      }).catch(() => {
      })
    },
    safetask(){
      let _this = this
      this.axios.get("warning/safeInfo ").then(function (response) {
        let result = response.data
        if(result.code=='200'){
          _this.tizheng = ""+result.result.tizheng
          _this.gongju = ""+result.result.gongju
          _this.weilan = ""+result.result.weilan
          _this.sos = ""+result.result.sos
          _this.dieluo = ""+result.result.dieluo
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    exportToExcel() {
    //excel数据导出
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../excel/Export2Excel')
        const tHeader = ['报警时间','人员姓名', '报警类型']
        const filterVal = ['recordTime','onwername', 'typeName']
        const list = this.warningUser
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '报警列表');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
          if (j == 'recordTime') {
            return this.format(v[j])
          } else {
            return v[j]
          }
        }
        ))
    },
    format(shijianchuo) {
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
    },
    add0(m){
      return m<10?'0'+m:m
    },
  },
  filters:{
    timestampToDate (cjsj,time=false) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = (date.getDate()  < 10 ? '0'+(date.getDate() ) : date.getDate() ) + ' '
      var h = (date.getHours()  < 10 ? '0'+(date.getHours() ) : date.getHours() ) + ':'
      var m = (date.getMinutes()  < 10 ? '0'+(date.getMinutes() ) : date.getMinutes() ) + ':'
      var s = (date.getSeconds()  < 10 ? '0'+(date.getSeconds() ) : date.getSeconds() )
      return Y+M+D+h+m+s
    },
  },
}
</script>

<style scoped>
  .state-warring{
    color: #FF580E
  }
  .safe-radio-body {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 80px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    padding: 0.15rem 0rem;
    border-radius: 0.2rem;
    z-index: 999;
    height: 40px;
    width: 600px;
  }
  .safe-warring-body {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 114px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    padding: 0.15rem 0rem;
    border-radius: 0.2rem;
    z-index: 999;
    height: 390px;
    background-color: #fff;
    width: 600px;
  }
  .el-tabs__header{
    display: none;
  }
  .warring-tz{
    border-radius: 0.2rem;
    background:rgba(247,173,7,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }
  .warring-gj{
    border-radius: 0.2rem;
    background:rgba(255,144,14,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }
  .warring-qy{
    border-radius: 0.2rem;
    background:rgba(255,116,14,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }
  .warring-sos{
    border-radius: 0.2rem;
    background:rgba(255,88,14,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }
  .warring-dl{
    border-radius: 0.2rem;
    background:rgba(245,52,8,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }

  .safe-warring-body-700 {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 114px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    flex: 1 1 auto;
    padding: 0.15rem 0rem;
    border-radius: 0.2rem;
    z-index: 999;
    height: 360px;
    background-color: #fff;
    width: 850px;
  }
  .safe-warring-body-700 .el-tabs__header{
    display: none;
  }
  .safe-warring-body-700 .el-table__header tr,
  .safe-warring-body-700 .el-table__header th {
    padding: 0;
    height: 30px;
  }
  .safe-warring-body-700body .el-table__body tr,
  .safe-warring-body-700 .el-table__body td {
    padding: 0;
    height: 30px;
  }

  .safe-warring-body-700 .el-table__row td{
    background-color: rgba(233,243,252,1);
  }
  .safe-warring-body-700 .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: rgba(246,251,255,1);
  }
  .safe-warring-body-700 .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #d3faef;
    color: #118b9c;
  }

  .safe-warring-body table tr:first-child th:first-child {
    border-top-left-radius: 4px;
  }

  .safe-warring-body table tr:first-child th:last-child {
    border-top-right-radius: 4px;
  }
  .safe-warring-body table tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
  }

  .safe-warring-body table tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
  }
  .table-page{
    text-align: center;
    padding-top: 8px;
  }
  .el-table{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    font-weight: 500;
    color: #000;
  }
  .el-table td, .el-table th{
    padding: 3px 0;
  }
  .el-table-column--selection .cell{
    padding-left: 10px;
  }
</style>
